<template>
	<cu-page-base :nav-bar-options="navBarOptions" @clickNavBarLeft="goBack">
		<view class="cu-w-100 cu-px-20 cu-pt-40">
			<uni-section title="我的积分" type="line">
				<view v-if="loginStore && loginStore.userinfo !== undefined &&  loginStore.userinfo._id !== ''"
					class="cu-text-center">
					<u-row justify="space-between" gutter="10">
						<u-col span="12">
							<view class="cu-w-100  cu-d-flex cu-j-center cu-a-center cu-flex-column " :style="{
								height:'140rpx',
							}">
								<u-count-to :endVal="getScores" font-size="60" separator="," :duration="1500"
									:bold="true"></u-count-to>
								<view @click="gotoPage('/pages/oauth/account/scores/scores','navigate')"><text
										class="cu-font-sm cu-border-bottom cu-border-main">我的积分</text><uni-icons
										type="forward" size="14"></uni-icons></view>
							</view>
						</u-col>
					</u-row>
				</view>
				<view v-else @click="gotoPage('/pages/oauth/loginbywx/loginbywx','navigate')" class="cu-text-center">
					<text style="border-bottom: 1px solid #3e3e7e;">登录后查看</text>
				</view>
			</uni-section>
			<view class="cu-py-20"></view>
			<uni-section title="兑换列表" type="line">
				<block v-for="(item,idx) in list">
					<view :key="idx" class="cu-w-100 cu-shadow cu-border-r-20 cu-mb-40 cu-p-20 cu-text-white"
						style="height: 260rpx;background-image: linear-gradient(to right, #FF9800, #FF5722);">
						<view class="cu-row cu-j-sb">
							<view class="cu-font-lg cu-font-weight">|<text
									class="cu-pl-20">{{item.type | typeFormat}}</text></view>
						</view>
						<view class="cu-font-big cu-font-weight cu-text-center" style="font-size: 30px;">
							<u-count-to :endVal="item.exchange" :duration="1000" color="#FFFFFF" font-size="60"
								separator=","></u-count-to>
							<text @click="event('pay',item)" class="cu-font cu-mx-20"
								style="border-bottom: 1px solid #FFFFFF;">立即兑换</text>
						</view>
						<view class="cu-row cu-j-sb cu-pt-20">
							<view>库存：{{item.inventory}}</view>
							<view class="">消耗积分：{{item.consume}}</view>
							<view class="">有效期：{{item.expire}}{{item.unit | unitFormat}}</view>
						</view>
					</view>
				</block>
			</uni-section>

		</view>
	</cu-page-base>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import commMiXin from '@/common/mixin/common-mixin.js';
	export default {
		mixins: [commMiXin],
		computed: {
			...mapState({
				commonStore: state => state.commonStore,
				loginStore: state => state.loginStore,
			}),
			getScores() {
				let scores = 0;
				if (this.loginStore && this.loginStore.scores !== undefined) {
					const scoresArr = this.loginStore.scores
					if (scoresArr != null && scoresArr.length > 0 && scoresArr[0].balance >= 0) {
						scores = scoresArr[0].balance;
					}
				}
				return scores
			},
		},
		filters: {
			typeFormat(val) {
				let type = val;
				switch (val) {
					case "text2audio":
						type = "字符包";
						break;
					default:
				}
				return type;
			},
			unitFormat(val) {
				let type = val;
				switch (val) {
					case "month":
						type = "月";
						break;
					case "year":
						type = "年";
						break;
					default:
				}
				return type;
			},
		},
		data() {
			return {
				navBarOptions: {
					title: "积分兑换",
					leftText: "返回",
					leftIcon: "back",
				},
				list: [{
						type: "text2audio",
						inventory: 999,
						exchange: 1000,
						consume: 100,
						expire: 1,
						unit: "month"
					},
					{
						type: "text2audio",
						inventory: 999,
						exchange: 10000,
						consume: 900,
						expire: 1,
						unit: "year"
					},
					{
						type: "text2audio",
						inventory: 999,
						exchange: 100000,
						consume: 8000,
						expire: 1,
						unit: "year"
					}
				]
			};
		},
		onLoad() {},
		methods: {
			event(type, data) {
				if (type === "pay") {
					this.payText2audio(data);
				}
			},
			payText2audio(data) {
				const {
					type,
					inventory,
					exchange,
					consume,
					expire,
					unit
				} = data
				// 判断库存是否足够
				if (inventory <= 0) {
					uni.showToast({
						icon: "error",
						title: '库存不足',
						duration: 2000
					});
					return
				}
				// 判断积分是否足够
				if (this.getScores < consume) {
					uni.showToast({
						icon: "error",
						title: '积分不足',
						duration: 2000
					});
					return
				}
				let expire_pre = 1;
				if (unit === "month") {
					expire_pre = 30 * 24 * 60 * 60 * 1000
				} else if (unit === "year") {
					expire_pre = 365 * 24 * 60 * 60 * 1000
				}

				const param = {
					uid: this.loginStore.userinfo._id,
					type: type,
					source: 2,
					words: exchange,
					scores: this.getScores,
					consume: consume,
					expire_time: expire * expire_pre,
					that: this
				}

				this.$store.dispatch('wordsStore/addWords', param);
			},
			goBack(data) {
				this.gotoPage(1, 'navigateBack');
			},
		}
	}
</script>

<style lang="scss">
	.uni-section-content {
		padding: 10px;
	}
</style>